<script setup>
import { ref, computed } from "vue";
import * as echarts from "echarts";

const dataList = ref([
  {
    name: "油纸伞",
    value: 169,
    achievement: "创作了《本草纲目》111111111111111111111111111",
  },
  {
    name: "油纸伞",
    value: 179,
    achievement: "创作了《本草纲目》",
  },
  {
    name: "油纸伞",
    value: 19,
    achievement: "创作了《本草纲目》",
  },
  {
    name: "油纸伞",
    value: 50,
    achievement: "创作了《本草纲目》",
  },
  {
    name: "油纸伞",
    value: 30,
    achievement: "创作了《本草纲目》",
  },
  {
    name: "油纸伞",
    value: 25,
    achievement: "创作了《本草纲目》",
  },
  {
    name: "油纸伞",
    value: 75,
    achievement: "创作了《本草纲目》",
  },
]);

const name = computed(() => dataList.value.map((item) => item.name));
console.log(name);

const option = ref({
  title: {
    text: "中国古代优秀文化发源时间", // 修改标题
    left: "center",
    top:10,
    textStyle: {
      color: "#2c3e50",
      fontSize: 18,
    },
  },
  // 核心配置：控制图表位置和边距
  grid: {
    left: "5%", // 左侧留3%间隔
    right: "5%", // 右侧留3%间隔
    top: "15%", // 顶部留10%间隔
    bottom: "10%", // 底部留15%间隔（确保x轴标签不溢出）
    containLabel: true, // 自动包含坐标轴标签区域
  },
  tooltip: {
    trigger: "axis",
    formatter: (e) => {
      console.log(e);
      //   return `${e[0].name} : ${e[0].value}岁主要成就:${e[0].data.achievement}`;
      return `
        <div style="padding:0px;min-width:100px">
          <h4 style="margin:0 0 4px;color:#333">${e[0].name}:创作于${e[0].value}年</h4>
          <p style="margin:0px 0;font-size:12px">
            <div style="max-width: 100%;
                  word-break: break-all;
                  overflow-wrap: break-word;
                  white-space: normal;
                  min-width: 0;
                  line-break: anywhere;">${e[0].data.achievement}</div>
          </p>

        </div>
        `;
    },
  },
  xAxis: {
    type: "category",
    data: name, //x轴显示的内容
    boundaryGap: false, // 确保油线贴紧y轴
  },
  yAxis: {
    // min:10,//最小值
    type: "value",
    // name: "年份",
    // axisLabel: {
    //   formatter: function (value) {
    //     return value + "年"; // 数值后追加“年”字
    //   },
    // },
    scale: true,
  },
  series: [
    {
      data: dataList.value,
      type: "line",
      showSymbol: false,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          1,
          0,
          0, // 渐变方向：从左到右 (x0, y0, x1, y1)
          [
            { offset: 0, color: "#FFF3B0" }, // 柔和的淡黄色（起点）
            { offset: 0.3, color: "#FFB347" }, // 中间过渡色（橙黄色）
            { offset: 1, color: "#FF6B6B" }, // 柔和的珊瑚红（终点）
          ]
        ),
        width: 2, // 线条宽度
      },
    },
  ],
});
</script>

<template>
  <!-- 优秀文化的油线图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
